<template>
  <view class="h-full">
    <view class="flex justify-between items-center px-5">
      <view></view>
      <view class="w-full text-center p-5">选择城市</view>
      <view @click="close">
        <up-icon name="close" color="#909399" size="20"></up-icon>
      </view>
    </view>

    <view class="px-5">
      <up-search
        bgColor="#f7f9fc"
        :showAction="false"
        placeholder="搜索国家/城市/机场名称、代码或拼音"
        v-model="keyword"
        @change="searchCity"
      ></up-search>
    </view>
    <template v-if="!searchList.length && !isClear">
      <view class="flex w-full justify-center mt-2">
        <up-tabs
          @click="(e) => (current = e.index)"
          v-model:current="current"
          :list="listA"
          :inactiveStyle="{ color: '#1A1C1E', fontWeight: '700' }"
          :activeStyle="{ color: '#4365DE', fontWeight: '700' }"
          scrollable
          lineColor="#4365DE"
          lineWidth="32"
        ></up-tabs>
      </view>
      <view class="w-full h-[860rpx] overflow-scroll">
        <swiper
          :current="current"
          @change="(e) => (current = e.detail.current)"
          class="swiper"
        >
          <swiper-item class="w-full h-full">
            <scroll-view
              scroll-with-animation
              :scroll-into-view="toView"
              scroll-y="true"
              class="h-full w-full"
              style="height: 1200rpx"
            >
              <view class="w-full h-full px-5">
                <view class="my-3">
                  <view class="text-xl text-black pb-3">热门城市</view>
                  <view class="grid grid-cols-4 gap-2">
                    <view
                      class="bg-[#f7f9fc] px-2 py-2 text-center text-xs text-[#262626]"
                      v-for="(item, index) in inCityList.hot_city"
                      :key="index"
                      @click="handleChooseCity(item, 1)"
                    >
                      {{ item.name }}</view
                    >
                  </view>
                </view>
                <view class="mb-3 pt-3">
                  <view class="text-xl text-black pb-3">字母索引</view>
                  <view class="grid grid-cols-8 gap-2">
                    <view
                      @click="intoView(item)"
                      class="bg-[#f7f9fc] px-2 py-2 text-center text-xs text-[#262626]"
                      v-for="(item, index) in inCityList.chars"
                      :key="index"
                    >
                      {{ item }}</view
                    >
                  </view>
                </view>
                <view class="mb-3 pt-3">
                  <view class="pb-[400rpx]">
                    <view
                      class="text-base text-[#262626]"
                      v-for="(item, index) in inCityList.charCity"
                      :key="index"
                    >
                      <view :id="item.char" class="py-2">{{ item.char }}</view>
                      <view class="grid grid-cols-4 gap-2">
                        <view
                          class="bg-[#f7f9fc] px-2 py-2 text-center flex items-center justify-center text-xs text-[#262626]"
                          v-for="(v, i) in item.citys"
                          @click="handleChooseCity(v, 1)"
                          :key="i"
                        >
                          <text class="many"> {{ v.name }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </swiper-item>
          <swiper-item>
            <view class="flex w-full h-full overflow-scroll">
              <view class="" style="width: 200rpx; background-color: #f7f9fc">
                <view
                  :class="currentCity == index ? 'active' : ''"
                  v-for="(item, index) in outCityList.left"
                  :key="index"
                  @click="changeCity(index)"
                  class="aa px-3 w-full py-3 flex justify-center items-center text-xs text-[#262626]"
                >
                  <view class="many">{{ item.name }}</view>
                </view>
              </view>
              <scroll-view
                scroll-with-animation
                :scroll-into-view="toView"
                scroll-y="true"
                class="h-full w-full"
              >
                <view class="flex-1 bg-white flex flex-col justify-start">
                  <view class="px-5 py-3" v-if="outCityList.country.length">
                    <view>
                      <view
                        v-for="(item, index) in outCityList.country"
                        :key="index"
                      >
                        <view
                          class="text-base text-[#262626]"
                          style="padding-bottom: 24rpx"
                          >{{ item.name }}</view
                        >

                        <view
                          class="grid grid-cols-3 gap-2 mb-3"
                          style="
                            grid-template-columns: repeat(3, minmax(0, 1fr));
                          "
                          v-if="item.city.length"
                        >
                          <view
                            class="bg-[#f7f9fc] px-2 py-2 text-center text-xs text-[#262626]"
                            v-for="(v, i) in item.city"
                            :key="i"
                            @click="handleChooseCity(v, 1)"
                          >
                            <text class="many"> {{ v.name }}</text>
                          </view>
                        </view>
                        <view
                          class="flex-1 flex justify-center items-center h-[80rpx] w-full"
                          v-else
                        >
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="flex-1 flex justify-center items-center" v-else>
                    <up-empty
                      textSize="14"
                      textColor="#222222"
                      text="暂无城市信息"
                      icon="/static/empty.png"
                      width="64"
                      height="64"
                    >
                    </up-empty>
                  </view>
                </view>
              </scroll-view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </template>
    <view v-else>
      <scroll-view scroll-y="true" style="height: 962rpx">
        <view class="flex flex-col px-5" v-if="searchList.length">
          <view v-for="(item, index) in searchList" :key="index">
            <view
              class="borders flex justify-between items-center py-3"
              @click="handleChooseCity(item)"
            >
              <view class="flex items-center">
                <view
                  class="bg-theme rounded text-[20rpx] py-[2rpx] px-1 text-white mr-1"
                  >城市</view
                >
                <view class="text-base">{{ item.city_name }}</view>
              </view>
              <view class="flex items-center text-xs text-[#AEB2BC]">
                <view>{{ item.area_code }}</view>
                <text class="px-1">/</text>
                <view>{{ item.belong_name }}</view>
              </view>
            </view>
            <view v-for="(v, i) in item.airports" :key="i">
              <view
                class="borders flex justify-between items-center py-3 pl-6"
                @click="handleChooseCity(v)"
              >
                <view class="flex items-center">
                  <view
                    class="border-line rounded text-[20rpx] py-[2rpx] px-1 text-theme mr-1"
                    >机场</view
                  >
                  <view class="text-base">{{ v.airport_name }}</view>
                </view>
                <view class="flex items-center text-xs text-[#AEB2BC]">
                  <view>{{ v.airport_3 }}</view>
                  <text class="px-1" v-if="v.airport_4">/</text>
                  <view>{{ v.airport_4 }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view
          class="flex-1 flex justify-center items-center py-7 h-full"
          v-else
        >
          <up-empty
            textSize="16"
            textColor="#222222"
            text="暂无城市信息"
            icon="/static/empty.png"
            width="101"
            height="120"
          >
          </up-empty>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { throttle } from "lodash";
import {
  getInCity_api,
  getOutCity_api,
  searchAirport_api,
} from "@/api/index.js";
import { ref, reactive } from "vue";

const emits = defineEmits(["update:show", "choose"]);

const isClear = ref(false);
const current = ref(0);
const listA = ref([
  {
    name: "国内/港澳台",
  },
  {
    name: "国际",
  },
]);
const keyword = ref("");
const inCityList = ref({
  hot_city: [],
});
const getInCity = () => {
  getInCity_api().then((res) => {
    inCityList.value = res;
  });
};
getInCity();

const currentCity = ref(0);

const outCityList = ref({
  left: [],
  right: [],
  country: [],
  title: "",
});
const getOutCity = () => {
  getOutCity_api().then((res) => {
    outCityList.value.left = res.area_data.map((e) => {
      return {
        id: e.id,
        name: e.name,
      };
    });
    outCityList.value.left.unshift({ name: "最近/热门", id: "hot" });
    outCityList.value.right = res.area_data;
    outCityList.value.right.unshift({
      id: "hot",
      name: "最近/热门",
      country: [
        {
          name: "最近/热门",
          city: res.hot_city,
        },
      ],
    });
    outCityList.value.country = res.area_data[0].country;
    outCityList.value.title = res.area_data[0].name;
  });
};
getOutCity();

const changeCity = (index) => {
  currentCity.value = index;
  outCityList.value.country = outCityList.value.right[index].country;
  outCityList.value.title = outCityList.value.right[index].name;
};

const toView = ref("");
const intoView = (item) => {
  toView.value = item;
};

const searchList = ref([]);
const searchCity = throttle((e) => {
  if (!e) {
    isClear.value = false;
    toView.value = false;
    return (searchList.value = []);
  }
  isClear.value = true;
  e &&
    searchAirport_api(e).then((res) => {
      searchList.value = res;
    });
}, 1000);

const handleChooseCity = (item, type = 0) => {
  if (type) {
    keyword.value = item.shortname;
    return;
  }
  emits("choose", item);
  close();
};

const close = () => {
  emits("update:show", false);
  setTimeout(() => {
    keyword.value = "";
  }, 500);
};
</script>

<style lang="scss" scoped>
:deep(.u-tabs__wrapper__nav__item) {
  padding-left: 60rpx !important;
  padding-right: 60rpx !important;
}
.swiper {
  height: 100%;
}
.many {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.aa {
  background-color: #f7f9fc;
  &.active {
    background-color: #fff;
  }
}
:deep(.u-empty) {
  margin-bottom: 260rpx;
}
.scroll-Y {
  height: 1200rpx;
}
.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}
.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}
.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

.borders {
  border-bottom: 2rpx solid #eceff4;
}
.border-line {
  border: 2rpx solid #4365de;
}
</style>
